<template>
    <div class="food-item" @click="toDetail">
                <div class="left-img">
                    <img v-lazy="baseURL + fitem.food_img" alt="">
                </div>
                <div class="right-box">
                    <div class="food_name">{{fitem.food_name}}</div>
                    <div class="saleCount text-second" v-if="fitem.saleCount">月售：{{fitem.saleCount}}</div>
                    <div class="price">{{fitem.price}}</div>
                    <div v-if="fitem.categoryInfo">{{fitem.categoryInfo.category_name}}</div>
                </div>
                <span class="iconfont iconheart text-second"></span>
            </div>
</template>
<script>
export default {
    name:"food-item",
    props:["fitem"],
    methods:{
        toDetail(){
            this.$router.push({
                name:"foodDetail",
                params:{
                    id:this.fitem.id
                }
            });
        }
    }
}
</script>

<style scoped lang="scss">
.food-item{
    border-bottom: 1px solid #cccccc;
    padding: .03rem;
    display: flex;
    box-sizing: border-box;
    position: relative;
    .left-img{
        width: 1.3rem;
        height: .8rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .right-box{
        flex:1;  
        padding-left: .05rem;
        display: flex;
        font-size: .12rem;
        flex-direction: column;
        justify-content: space-around;
    }
    .iconfont{
        position: absolute;
        right: .05rem;
        top: .05rem;
        font-size: .2rem;
        box-shadow: 0 0 .1rem .02rem gray;
        border-radius: .1rem;
        padding: .01rem;
    }
}
</style>